$bgc-blue:#75BCDF;
@mixin ba {
    width: 480px;
    border: 1px solid #C7C7C7;
    background-color: white;
}
@mixin m-sctyle {
    display: block;
    position: absolute;
    top: 170px;
    width: 20px;
    height: 55px;
    background: url("../images/task02_next.png") 100%;
}
*{
    margin: 0;
    padding: 0; 
}
body{
    width: 600px;
    margin: 0 auto;
}

ul{
    width: 50%;
    display: none;
    list-style: none;
    float: left;
    .menu-font{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 50px;
        padding: 5px 0 5px 5px;
        border-bottom: 0.01rem solid #c9c9c9;
        font-size: 25px;
        text-decoration: none;
        color: #69d1e9;
        &::after {
            content: "";
            width: 10px;
            height: 10px;
            margin-right: 10px;
            border-top: 5px solid #69d1e9;
            border-right: 5px solid #69d1e9;
            transform: rotate(45deg);
        } 
    }  
}

header{
    display: flex;
    
    height: 80px;
    background-color: $bgc-blue;
    align-items: center;
}
.main{
    background-color: #EFEFEF;
    height: 825px;
    position: relative;
    overflow: hidden; 
    .lastGame{
        @include ba;
        display: flex;
        align-items: center;
        margin: 5% auto;
        height: 150px;

        .lastGame-guess{
            width: 91%;
            font-size: 2rem;
            text-align: center;
            color: #989898;
        }
    }
    
    .game{
        @include ba;
        height: 110px;
        margin: 2% auto 0;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #E6B13A;
        .ghostHunt{
            width: 100%;
            text-align: center;
            font-size: 2rem;
            color: #E6B13A;
        }
    }
    .gameType{
        @include ba;
        position: relative;
        margin: 0 auto;
        border-top: 1px solid #E6B13A;
        margin-bottom: 7%;
        .main-one,
        .main-three,
        .main-five {
            width: 400px;
            margin: 5% 2% 5% 9%;
            padding: 26px;
            font-size: 16px;
            color: white;
            background-color: #69d1e9;
            border: none;
            outline: none;
        }
        .main-three-img {
            @include m-sctyle();
            right: 4px;
        }
        .main-four-img {
           @include m-sctyle();
            transform: rotateY(180deg); /* 水平镜像旋转 */
            right: 454px;
        }
        .main-two,
        .main-four,
        .main-six {
        margin: 0;
        text-align: center;
        font-size: 12px;
        color: #787878;
        }
        .circle{
            width: 50px;
            height: 20px;
            margin: 4% auto;
            display: flex;
            justify-content: space-between;
            span{
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #EFEFEF;
                &:hover{
                    cursor: pointer;
                    background-color: #94D0E8;
                }
            }
        }
    }
    .mobile{
        
        position: absolute;
        top: 202px;
        left: 59px;
    }
    .mobileBox{
        position: absolute;
        top: 202px;
        left: 59px;
        display: none;
    }
}





